<template>
  <!-- 普通登录 -->
  <div class="common-login">
    <el-form-item label="用户名" prop="username">
      <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <el-input maxlength="5" v-model="loginForm.captcha" class="captcha" ref="captcha"
        @keydown.native.enter="submitForm('loginForm')"></el-input>
      <span class="svg" v-loading="loading">
        <i v-html="captcha" @click="getCaptcha"></i>
      </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="el-button--primary" @click="submitForm('loginForm')">提交</el-button>
    </el-form-item>

    <el-form-item>
      <i class="sms">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iphone"></use>
        </svg>
      </i>
      <a href="javascript:;" @click="$emit('changeSmsType')" style="color: #fff; font-size: 16px">切换短信登入</a>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users"

export default {
  created() {
    this.getCaptcha()
  },
  data() {
    return {
      captcha: "",//验证码
      isSmsLogin: true,//控制是否切换短信登录，
      loading:false,
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      }

    }
  },
  methods: {
    submitForm(loginForm) {
      this.$emit('submit')
    },
    // 获取验证码
    getCaptcha() {
      // 打开加载动画
      this.loading=true,
      api.getCaptcha()
        .then(res => {
          this.captcha = res.data.img
          // 关闭加载动画
          this.loading=false
        })
    }

  },
  watch: {
    loginForm: {
      handler(newVal) {
        // console.log(newVal)
        this.$emit('syncLoginForm', newVal)
      },
      deep: true
    }
  }

}
</script>
<style lang="less" scoped>
.sms {
  margin-left: -15px !important;
  width: 250px !important;
}

.icon {
  width: 2em;
  height: 2em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
.captcha{
  position:relative;
}
/deep/.svg {
  background: #fff;
  position:absolute;
  top: 1px;
  right: 25px;
  height: 41px;
  width: 150px;
  cursor: pointer;
  border: 0;
  border-radius: 0px 5px 5px 0;
}
</style>
